<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container">
			<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="账户" v-model.trim="user.username"> </el-input>
			<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
			<el-button class="filter-item" v-if="userManager_btn_add" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">添加</el-button>
		</div>
		<el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
			<el-table-column type="index" label="序号" header-align="center" align="center" width="65">
				<template scope="scope"><span>{{scope.$index+(user.page - 1) * user.limit + 1}} </span></template>
			</el-table-column>
			<el-table-column align="center" label="序号" width="65" v-if="false">
				<template scope="scope">
					<span>{{scope.row.id}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200" align="center" label="姓名">
				<template scope="scope">
					<span>{{scope.row.name}}</span>
				</template>
			</el-table-column>
			<el-table-column width="110" align="center" label="账户">
				<template scope="scope">
					<span>{{scope.row.username}}</span>
				</template>
			</el-table-column>
			<el-table-column width="110" align="center" label="性别">
				<template scope="scope">
					<span>{{scope.row.sex}}</span>
				</template>
			</el-table-column>
			<el-table-column width="300" align="center" label="备注">
				<template scope="scope">
					<span>{{scope.row.description}}</span>
				</template>
			</el-table-column>
			<el-table-column width="180" align="center" label="最后时间">
				<template scope="scope">
					<span>{{scope.row.updTime}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200" align="center" label="最后更新人">
				<template scope="scope">
					<span>{{scope.row.updName}}</span>
				</template>
			</el-table-column>
			<el-table-column fixed="right" align="center" label="操作" width="230">
				<template scope="scope">
					<el-button v-if="userManager_btn_edit" size="small" type="success" @click="handleUpdate(scope.row)">编辑
					</el-button>
					<el-button v-if="userManager_btn_reset" size="small" type="success" @click="handleUpdateReset(scope.row)">重置密码
					</el-button>
					<el-button v-if="userManager_btn_del" size="small" type="danger" @click="handleDelete(scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div v-show="!listLoading" class="pagination-container">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="user.page" :page-sizes="[10,20,30, 50]" :page-size="user.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
		</div>
		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-form-item label="账户" prop="username">
					<el-input  v-model="form.username" placeholder="请输入账户"></el-input>
				</el-form-item>

				<el-form-item v-if="dialogStatus == 'create'" label="密码" prop="password">
					<!--<el-input type="password" v-model="form.password"></el-input>-->
					<el-input :type="pwdType" v-model="form.password" placeholder="请输入密码" onpaste="return false" ></el-input>
					<img :src="imgSrc" style="position: absolute;right: 0;top: 3px;" @click="changeType()" alt="" />
				</el-form-item>

				<el-form-item label="性别">
					<el-select class="filter-item" v-model="form.sex" placeholder="请选择">
						<el-option v-for="item in  sexOptions" :key="item" :label="item" :value="item"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="描述">
					<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 5}" placeholder="请输入内容" v-model="form.description"> </el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel('form')">取 消</el-button>
				<el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
				<el-button v-else type="primary" @click="update('form')">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisibleReset"">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="form.name" readonly></el-input>
				</el-form-item>
				<el-form-item label="账户" prop="username">
					<el-input  v-model="form.username" readonly></el-input>
				</el-form-item>

				<el-form-item  label="密码" prop="password">
					<!--<el-input type="password" v-model="form.password"></el-input>-->
					<el-input :type="pwdType" v-model="form.password" placeholder="请输入密码" onpaste="return false" ></el-input>
					<img :src="imgSrc" style="position: absolute;right: 0;top: 3px;" @click="changeType()" alt="" />
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel('form')">取 消</el-button>
				<el-button  type="primary" @click="updateRest('form')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		page,
		addObj,
		getObj,
		delObj,
		putObjReset,
		putObj
	} from 'api/admin/user/index';
	import { mapGetters } from 'vuex';
	import md5 from 'js-md5';
	import crypto from 'crypto';
	import CryptoJS from 'crypto-js';
	export default {
		name: 'user',
		data() {
			return {
				pwdType: "password",
				imgSrc: require("../../../assets/login_images/open_eyes.png"),
				form: {
					username: undefined,
					name: undefined,
					sex: '男',
					password: undefined,
					description: undefined
				},
				rules: {
					name: [{
							required: true,
							message: '请输入用户',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 25,
							message: '长度在2 到 25 个字符',
							trigger: 'blur'
						}
					],
					username: [{
							required: true,
							message: '请输入账户',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 25,
							message: '长度在 2 到 25 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						}/*,
						{
							min: 8,
							max: 16,
							message: '长度在 8 到 16 个字符',
							trigger: 'blur'
						}*/
					]
				},
				list: null,
				total: null,
				listLoading: true,
				user: {
					page: 1,
					limit: 10
				},
				sexOptions: ['男', '女'],
				dialogFormVisible: false,
				dialogFormVisibleReset: false,
				dialogStatus: '',
				userManager_btn_edit: false,
				userManager_btn_del: false,
				userManager_btn_add: false,
				textMap: {
					update: '编辑',
					create: '创建',
					reset: '重置密码'
				},
				tableKey: 0
			}
		},
		created() {
			this.getList();
			this.userManager_btn_edit = this.elements['userManager:btn_edit'];
			this.userManager_btn_del = this.elements['userManager:btn_del'];
			this.userManager_btn_add = this.elements['userManager:btn_add'];
			this.userManager_btn_reset = this.elements['userManager:btn_reset'];
		},
		computed: {
			...mapGetters([
				'elements'
			])
		},
		methods: {
			getList() {
				this.listLoading = true;
				page(this.user)
					.then(response => {
						this.list = response.data.rows;
						this.total = response.data.total;
						this.listLoading = false;
					})
			},
			changeType() {
				this.pwdType = this.pwdType === 'password' ? 'text' : 'password';
				this.imgSrc = this.imgSrc === require("../../../assets/login_images/colse_eyes.png") ? require("../../../assets/login_images/open_eyes.png") : require("../../../assets/login_images/colse_eyes.png");
			},
			handleFilter() {
				this.getList();
			},
			handleSizeChange(val) {
				this.user.limit = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.user.page = val;
				this.getList();
			},
			handleCreate() {
				this.resetTemp();
				this.dialogStatus = 'create';
				this.dialogFormVisible = true;
			},
			handleUpdate(row) {
				getObj(row.id)
					.then(response => {
						this.form = response.data;
						this.dialogFormVisible = true;
						this.dialogStatus = 'update';
					});
			},
			handleUpdateReset(row) {
				/*getObj(row.id)
					.then(response => {*/
						this.form = row;
						this.form.password='';
						this.dialogFormVisibleReset = true;
						this.dialogStatus = 'reset';
					/*});*/
			},
			StringTypeDetermination(password) {
				var flag = false;
				var reg = "(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}";
				var regChinese = "^[^\\u4e00-\\u9fa5]{0,}$"; //判断中文
				if(!password.match(reg) || !password.match(regChinese))
					flag = true;
				return flag;
			},
			handleDelete(row) {
				this.$confirm('此操作将永久删除, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						delObj(row.id)
							.then(() => {
								this.$notify({
									title: '成功',
									message: '删除成功',
									type: 'success',
									duration: 2000
								});
								const index = this.list.indexOf(row);
								this.list.splice(index, 1);
							});
					});
			},
			create(formName) {
				const set = this.$refs;
				set[formName].validate(valid => {
					if(valid) {
						if(this.StringTypeDetermination(this.form.password.toString())){
						this.$message({
							message: '密码必须包含数字字母特殊符号中的三种,长度在 8 到 16 个字符！',
							duration: '3000',
							type: 'warning'
						  })
						  return false
					    }
						var md5 = crypto.createHash("md5");
					    md5.update(this.form.password.toString());
					    this.form.password = md5.digest('hex');
						addObj(this.form)
							.then((result) => {
								if(result.status == 3) {
									this.$notify({
										title: '失败',
										message: '账号不能为空，请重新输入!',
										type: 'warning',
										duration: 3000
									});
									return
								};
								if(result.status == 4) {
									this.$notify({
										title: '失败',
										message: '密码不能为空，请重新输入!',
										type: 'warning',
										duration: 3000
									});
									return
								};
								if(result.status == 2) {
									this.$notify({
										title: '失败',
										message: '创建用户失败，账号已经存在!',
										type: 'warning',
										duration: 3000
									});
									return
								};
								if(result.status == 1) {
									this.$notify({
										title: '失败',
										message: result.message,
										type: 'warning',
										duration: 3000
									});
									return
								};
								this.dialogFormVisible = false;
								this.getList();
								this.$notify({
									title: '成功',
									message: '创建用户成功',
									type: 'success',
									duration: 2000
								});
							})
					} else {
						return false;
					}
				});
			},
			cancel(formName) {
				this.dialogFormVisible = false;
				this.dialogFormVisibleReset = false;
				this.$refs[formName].resetFields();
			},
			update(formName) {
				const set = this.$refs;
				set[formName].validate(valid => {
					if(valid) {
						//        this.dialogFormVisible = false;
						/* this.form.password = undefined;*/
						putObj(this.form.id, this.form).then((result) => {
							if(result.status == 0) {
								this.dialogFormVisible = false;
								this.getList();
								this.$notify({
									title: '成功',
									message: '更新成功',
									type: 'success',
									duration: 2000
								});
							} else {
								this.$notify({
									title: '失败',
									message: result.message,
									type: 'warning',
									duration: 3000
								});
							}
						});
					} else {
						return false;
					}
				});
			},
			updateRest(formName) {
				const set = this.$refs;
				set[formName].validate(valid => {
					if(valid) {
						//        this.dialogFormVisible = false;
						/* this.form.password = undefined;*/
						if(this.StringTypeDetermination(this.form.password.toString())){
						this.$message({
							message: '密码必须包含数字字母特殊符号中的三种,长度在 8 到 16 个字符！',
							duration: '3000',
							type: 'warning'
						  })
						  return false
					    }
						var md5 = crypto.createHash("md5");
					    md5.update(this.form.password.toString());
					    this.form.password = md5.digest('hex');
						putObjReset(this.form.id, this.form).then((result) => {
							if(result.status == 0) {
								this.dialogFormVisibleReset = false;
								this.getList();
								this.$notify({
									title: '成功',
									message: '更新成功',
									type: 'success',
									duration: 2000
								});
							} else {
								this.$notify({
									title: '失败',
									message: result.message,
									type: 'warning',
									duration: 3000
								});
							}
						});
					} else {
						return false;
					}
				});
			},
			resetTemp() {
				this.form = {
					username: undefined,
					name: undefined,
					sex: '男',
					password: undefined,
					description: undefined
				};
			}
		}
	}
</script>